<template>
  <div>
    <div style="text-align: center;margin-bottom: 20px;">
      <!-- <p v-if="isenter">注：要求彩色原件或加盖公章的复印件照片，支持图片格式JPG、PNG，且每个文件大小不超过{{imageSize}}M</p> -->
      <p>注：以下所有上传资料均需加盖公章，支持图片格式JPG、PNG，且每个文件大小不超过{{imageSize}}M</p>
    </div>
    <a-form @submit="handleSubmit" style="width:60%;margin:0px auto;" :form="form">
      <a-row class="row-sty">
        <a-col :xs="{ span : 24 }" :sm="{ span:9 }" class="formGroupTitle">合作机构资料</a-col>
        <a-col :xs="{ span : 24 }" :sm="{ span:12,offset:1 }"></a-col>
      </a-row>

      <a-form-item v-bind="formItemLayout" label="营业执照">
        <div class="clearfix" style="display:inline-block;">
          <a-upload
            v-decorator="['upload',{rules: [{ required: true, message: '请上传营业执照!' }]}]"
            name="upfile"
            :headers="henderstoken"
            action="/file/file/upload"
            listType="picture-card"
            :fileList="fileList"
            :data="{to}"
            @preview="handlePreview"
            @change="handleChange"
          >
            <div v-if="fileList.length < 1">
              <a-icon type="plus" />
              <div class="ant-upload-text">营业执照</div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>
        </div>
      </a-form-item>

      <!-- <div style="display:flex;"> -->
      <a-form-item v-bind="formItemLayout" label="法定代表人身份证">
        <div class="clearfix" style="display:inline-block;">
          <a-upload
            v-decorator="['upload2',{rules: [{ required: true, message: '请上传身份证正/反面!' }]}]"
            action="/file/file/upload"
            listType="picture-card"
            :data="{to}"
            name="upfile"
            :headers="henderstoken"
            :fileList="fileList2"
            @preview="handlePreview2"
            @change="handleChange2"
          >
            <div v-if="fileList2.length < 1">
              <a-icon type="plus" />
              <div class="ant-upload-text">人像面</div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible2" :footer="null" @cancel="handleCancel2">
            <img alt="example" style="width: 100%" :src="previewImage2" />
          </a-modal>
        </div>
        <div class="clearfix" style="display:inline-block;">
          <a-upload
            :data="{to}"
            name="upfile"
            :headers="henderstoken"
            action="/file/file/upload"
            listType="picture-card"
            :fileList="fileList3"
            @preview="handlePreview3"
            @change="handleChange3"
          >
            <div v-if="fileList3.length < 1">
              <a-icon type="plus" />
              <div class="ant-upload-text">国徽面</div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible3" :footer="null" @cancel="handleCancel3">
            <img alt="example" style="width: 100%" :src="previewImage3" />
          </a-modal>
        </div>
      </a-form-item>

      <a-form-item v-if="isenter" v-bind="formItemLayout" label="对公账户证明">
        <div v-if="isenter" class="clearfix" style="display:inline-block;">
          <a-upload
            v-decorator="['upload4',{rules: [{ required: true,message: '请上传账户证明!' }]}]"
            :data="{to}"
            name="upfile"
            :headers="henderstoken"
            action="/file/file/upload"
            listType="picture-card"
            :fileList="fileList4"
            @preview="handlePreview4"
            @change="handleChange4"
          >
            <div v-if="fileList4.length < 1">
              <a-icon type="plus" />
              <div class="ant-upload-text">账户证明</div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible4" :footer="null" @cancel="handleCancel4">
            <img alt="example" style="width: 100%" :src="previewImage4" />
          </a-modal>
        </div>
      </a-form-item>

      <a-form-item v-if="!isenter" v-bind="formItemLayout" label="结算银行账户">
        <div class="clearfix" style="display:inline-block;">
          <a-upload
            v-decorator="['upload5',{rules: [{ required: true, message: '请上传银行卡正/反面!' }]}]"
            :data="{to}"
            name="upfile"
            :headers="henderstoken"
            action="/file/file/upload"
            listType="picture-card"
            :fileList="fileList5"
            @preview="handlePreview5"
            @change="handleChange5"
          >
            <div v-if="fileList5.length < 1">
              <a-icon type="plus" />
              <div class="ant-upload-text">银行卡正面</div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible5" :footer="null" @cancel="handleCancel5">
            <img alt="example" style="width: 100%" :src="previewImage5" />
          </a-modal>
        </div>
         <p
                style="font-size: 12px;line-height: 30px;"
              >为了您的资金安全，请勿上传带有CVV安全码的照片</p>
      </a-form-item>
      <a-form-item v-if="isadmin" v-bind="formItemLayout" label="其他材料">
        <div class="clearfix" style="display:inline-block;">
          <a-upload
            v-decorator="['uploadOther',{rules: [{ required: false, message: '' }]}]"
            name="upfile"
            :headers="henderstoken"
            action="/file/file/upload"
            listType="picture-card"
            :fileList="fileList7"
            :data="{to}"
            @preview="handlePreview7"
            @change="handleChangeOther"
          >
            <div>
              <a-icon type="plus" />
              <div class="ant-upload-text">其他材料</div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible7" :footer="null" @cancel="handleCancel7">
            <img alt="example" style="width: 100%" :src="previewImage7" />
          </a-modal>
        </div>
      </a-form-item>
      <a-row>
        <a-col :xs="{ span : 24 }" :sm="{ span:12,offset:10 }">
          <a-button class="submitButton" html-type="submit" type="primary" :loading="loading">下一步</a-button>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
import { mapState, mapMutations, mapAction } from "vuex";
import api from "@/common/api";
import moment from "moment";
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}
export default {
  data() {
    return {
      dateFormat: "YYYY-MM-DD",
      loading: false,
      isenter: true,
      isadmin: false,
      modify: "",
      memberNo: "",
      henderstoken: {
        Authorization: localStorage.getItem("token"),
      },
      to:"",
      form: this.$form.createForm(this),
      previewVisible: false,
      previewVisible2: false,
      previewVisible3: false,
      previewVisible4: false,
      previewVisible5: false,
      previewVisible6: false,
      previewVisible7: false,
      previewImage: "",
      previewImage2: "",
      previewImage3: "",
      previewImage4: "",
      previewImage5: "",
      previewImage6: "",
      previewImage7: "",
      fileList: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      fileList5: [],
      fileList6: [],
      fileList7: [],
      merchantType: "", //客户类型
      uploadImg: {
        logBankCard: {
          id: "",
          isPrivate: Boolean,
          imgCardno: null,
        },
        logMerchantPospUpdateRequest: {
          id: "",
          image: "",
          publicAccount: "",
          doorImg: "",
          deskImg: "",
          officeImg: "",
          entrustRecharImg: "",
          merchantProtocolImgs: [],
          otherImgs: [],
          kinshipCertificateImg: "",
          handCardImg: "",
          legalPersonAccount: false, //是否是法人
          merchantType: "",
        },
        cardHolderIdentity: {
          id: "",
          imgHead: "",
          imgEmblem: "",
        },
        legalLogIdentity: {
          id: "",
          imgHead: "",
          imgEmblem: "",
        },
        authLogIdentity: {
          identityName: "",
          identityNo: "",
          expiryDate: "",
          imgHead: "",
          imgEmblem: "",
          imgExt1: "",
        },
        otherFile:""
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 9 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12, offset: 1 },
          md: { span: 10, offset: 1 },
        },
      },
      queryid: null,
      agentid: null,
      bankCardid: null,
      legalIdentityid: null,
      isPrivate: Boolean,
    };
  },
  computed: {
    ...mapState({
      imageSize: (state) => state.imageSize,
    }),
  },
  mounted() {

    this.memberNo = this.$route.params.memberNo;
    this.queryid = this.$route.params.queryid;
    
    let adminType = localStorage.getItem("AgentType")
    console.log("adminType",adminType)
    if (adminType == "AGENT_MANAGER") {
      this.isadmin = true;
    } else {
      this.isadmin = false;
    }

    if (this.$route.params.isPrivate == false) {
      this.isenter = true;
      this.isPrivate = false;
    } else {
      this.isenter = false;
      this.isPrivate = true;
    }

    this.getExistData();
  },
  created() {},
  methods: {
    moment,
    //日期不可选
    disabledDate(current) {
      // Can not select days before today and today
      return current && current < moment().endOf("day");
    },
    dateChange(date, dateString) {
      console.log("dateString", dateString);
      this.uploadImg.authLogIdentity.expiryDate = dateString;
    },
    getExistData() {
      this.$axios.get("/agent/logAgent/fetch/" + this.queryid).then(
        (res) => {
          if (res.data.code == "OK") {
            console.log("res", res);
            localStorage.setItem("queryid", this.queryid);    
            
            this.modify = res.data.data;
            this.to = this.modify.agent.memberNo + "_" + this.modify.agent.merchantName
            this.merchantType = this.modify.agent.merchantType;
            this.memberNo = this.modify.agent.memberNo;
            
            this.isPrivate = this.modify.bankCard.isPrivate;
            this.isenter = !this.modify.bankCard.isPrivate
            this.agentid = Number(this.modify.agent.id);
            this.bankCardid = Number(this.modify.bankCard.id);
            this.legalIdentityid = Number(this.modify.legalIdentity.id);

            this.uploadImg.logMerchantPospUpdateRequest.image = this.modify.agent.image; //营业执照
            this.uploadImg.logMerchantPospUpdateRequest.publicAccount = this.modify.agent.publicAccount; //账户证明

            this.uploadImg.legalLogIdentity.imgHead = this.modify.legalIdentity.imgHead; //身份证正
            this.uploadImg.legalLogIdentity.imgEmblem = this.modify.legalIdentity.imgEmblem; //身份证反

            this.uploadImg.logBankCard.imgCardno = this.modify.bankCard.imgCardno; //银行卡正
            this.uploadImg.otherFile = this.modify.agent.otherFile; //其他材料

            this.form.setFieldsValue({
              upload: this.modify.agent.image, //营业执照
              upload2: this.modify.legalIdentity.imgHead, //身份证
            });
            if (this.uploadImg.otherFile) {
              let data = this.uploadImg.otherFile.split(',')
              console.log('data1',data)
              for (let i = 0; i < data.length; i++){
                let item = {
                  uid: Math.random(10000),
                  name: "xxx.png",
                  status: "done",
                  response:{data:data[i]},
                  url:
                  "/file/file/download/" +
                  data[i],
                }
                this.fileList7.push(item)
              }
            }
            console.log(this.fileList7)
            // 对公对私判断
            if (this.isPrivate) {
              // this.isenter = false;
              if (this.modify.bankCard.imgCardno) {
                this.$nextTick(() => {
                  this.form.setFieldsValue({
                    upload5: this.modify.bankCard.imgCardno, //银行卡
                  });
                });
              }
            } else {
              //对公
              // this.isenter = true;
              if (this.modify.agent.publicAccount) {
                this.$nextTick(() => {
                  this.form.setFieldsValue({
                    upload4: this.modify.agent.publicAccount, //账户证明
                  });
                });
              }
            }

            if (this.modify.agent.image) {
              this.fileList = [
                {
                  uid: Math.random(10000),
                  name: "xxx.png",
                  status: "done",
                  url:
                    "/file/file/download/" +
                    this.uploadImg.logMerchantPospUpdateRequest.image,
                },
              ];
            }
            if (this.uploadImg.legalLogIdentity.imgHead) {
              this.fileList2 = [
                {
                  uid: Math.random(10000),
                  name: "xxx.png",
                  status: "done",
                  url:
                    "/file/file/download/" +
                    this.uploadImg.legalLogIdentity.imgHead,
                },
              ];
            }
            if (this.uploadImg.legalLogIdentity.imgEmblem) {
              this.fileList3 = [
                {
                  uid: Math.random(10000),
                  name: "xxx.png",
                  status: "done",
                  url:
                    "/file/file/download/" +
                    this.uploadImg.legalLogIdentity.imgEmblem,
                },
              ];
            }

            if (this.uploadImg.logMerchantPospUpdateRequest.publicAccount) {
              this.fileList4 = [
                {
                  uid: Math.random(10000),
                  name: "xxx.png",
                  status: "done",
                  url:
                    "/file/file/download/" +
                    this.uploadImg.logMerchantPospUpdateRequest.publicAccount,
                },
              ];
            }
            if (this.uploadImg.logBankCard.imgCardno) {
              this.fileList5 = [
                {
                  uid: Math.random(10000),
                  name: "xxx.png",
                  status: "done",
                  url:
                    "/file/file/download/" +
                    this.uploadImg.logBankCard.imgCardno,
                },
              ];
            }
            
            
          }
        },
        (err) => {}
      );
    },
    handleSubmit(e) {
      console.log("点击了提交");
      e.preventDefault();
      this.form.validateFields((err, values) => {
        // console.log("err",!err);
        console.log("err", err);
        // if (!err) {
        // console.log("values", values);

        // console.log("this.uploadImg", this.uploadImg);
        if (this.fileList.length == 0) {
          console.log("请上传营业执照照片");
          this.$message.error("请上传营业执照照片");
          return false;
        }
        if (this.fileList2.length == 0) {
          console.log("请上传身份证正面照片");
          this.$message.error("请上传身份证正面照片");
          return false;
        }
        if (this.fileList3.length == 0) {
          console.log("请上传身份证反面照片");
          this.$message.error("请上传身份证反面照片");
          return false;
        }
        if (this.isenter && this.fileList4.length == 0) {
          console.log("请上传对公账户证明照片");
          this.$message.error("请上传对公账户证明照片");
          return false;
        }
        if (!this.isenter && this.fileList5.length == 0) {
          this.$message.error("请上传银行卡正面照片");
          return false;
        }
        

        // this.uploadImg

        let data = {
          agentInfoUpdateRequest: {
            memberNo: this.memberNo,
            merchantType: this.merchantType,
            id: this.agentid,
            image: this.uploadImg.logMerchantPospUpdateRequest.image, //营业执照
            publicAccount:
              this.uploadImg.logMerchantPospUpdateRequest.publicAccount != ""
                ? this.uploadImg.logMerchantPospUpdateRequest.publicAccount
                : null, //账户证明
          },
          legalLogIdentity: {
            id: this.legalIdentityid,
            imgHead: this.uploadImg.legalLogIdentity.imgHead, //身份证正
            imgEmblem: this.uploadImg.legalLogIdentity.imgEmblem, //身份证反
          },
          logBankCard: {
            id: this.bankCardid,
            isPrivate: this.isPrivate,
            imgCardno:
              this.uploadImg.logBankCard.imgCardno != ""
                ? this.uploadImg.logBankCard.imgCardno
                : null, //银行卡正
          },
        };
        if (this.isadmin) {
          data.agentInfoUpdateRequest.otherFile=this.uploadImg.otherFile
        }
        this.loading = true;
        this.$axios.post("/agent/logAgent/update/image", data).then(
          (res) => {
            console.log("updateimage", res);
            this.loading = false;
            if (res.data.code == "OK") {
              if (this.isadmin == true) {
                this.$router.push(`/Partners/admin/${this.queryid}/step3`);
              } else {
                this.$router.push(`/Partners/${this.queryid}/step3`);
              }
            } else {
              this.$message.error(res.data.message);
            }
          },
          (err) => {
            this.loading = false;
            console.log(err);
          }
        );
        // }
      });
    },
    // 营业执照图片
    handleChange({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
        return;
      }
      this.fileList = fileList;
      let obj =
        fileList.length > 0
          ? fileList[0]
          : { response: { data: null, code: null } };
      if (obj) {
        if (obj.response) {
          if (obj.response.code == "OK") {
            console.log(obj.response.data);
            this.uploadImg.logMerchantPospUpdateRequest.image =
              obj.response.data;
          }
        }
      }
    },
    handleChange2({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
        return;
      }
      this.fileList2 = fileList;
      let obj =
        fileList.length > 0
          ? fileList[0]
          : { response: { data: null, code: null } };
      if (obj) {
        if (obj.response) {
          if (obj.response.code == "OK") {
            console.log(obj.response.data);
            this.uploadImg.legalLogIdentity.imgHead = obj.response.data;
          }
        }
      }
    },
    handleChange3({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
        return;
      }
      this.fileList3 = fileList;
      let obj =
        fileList.length > 0
          ? fileList[0]
          : { response: { data: null, code: null } };
      if (obj) {
        if (obj.response) {
          if (obj.response.code == "OK") {
            console.log(obj.response.data);
            this.uploadImg.legalLogIdentity.imgEmblem = obj.response.data;
          }
        }
      }
    },
    // 对公账户
    handleChange4({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
        return;
      }
      console.log("fileList", fileList);
      if (fileList.length == 0) {
        console.log("为空");
        this.fileList4 = fileList;
        this.form.setFieldsValue({
          upload4: " ",
        });
        console.log(this.fileList4);
      } else {
        this.fileList4 = fileList;
        let obj = fileList[0];
        if (obj.response) {
          console.log(obj.response.data);
          this.uploadImg.logMerchantPospUpdateRequest.publicAccount =
            obj.response.data;
        }
      }
    },
    handleChange5({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
        return;
      }
      console.log("fileList", fileList);
      this.fileList5 = fileList;
      let obj =
        fileList.length > 0
          ? fileList[0]
          : { response: { data: null, code: null } };
      if (obj) {
        if (obj.response) {
          if (obj.response.code == "OK") {
            console.log(obj.response.data);
            this.uploadImg.logBankCard.imgCardno = obj.response.data;
          }
        }
      }
    },
    handleChange6({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
        return;
      }
      this.fileList6 = fileList;
      let obj =
        fileList.length > 0
          ? fileList[0]
          : { response: { data: null, code: null } };
      if (obj) {
        if (obj.response) {
          if (obj.response.code == "OK") {
            console.log(obj.response.data);
            this.uploadImg.logBankCard.imgTrack = obj.response.data;
          }
        }
      }
    },
     // 其他材料
    handleChangeOther({ file, fileList }) {
      // let pos = file.name.lastIndexOf(".");
      // let lastName = file.name.substring(pos, file.name.length);
      // let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      // if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
      //   this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
      //   return;
      // }
      console.log(fileList)
      if (file.size / (1024 * 1024) > 50) {
        this.$message.error(`上传图片大小应小于50Mb`);
        return;
      }
      this.fileList7 = fileList;
      if (fileList.length > 0) {
        let data = []
        for (var i = 0; i < fileList.length;i++) {
          data.push(fileList[i].response.data)
        }
        console.log('data', data)
        this.uploadImg.otherFile = data.toString()
        console.log('other', this.uploadImg.otherFile)
      }
    },
    beforeUpload(file) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpg、 png 2种格式！");
        return;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
      }
      return isLt2M;
    },
    doNext(step) {
      var st = step + 1;
      this.$router.replace("/Partners/step3");
    },
    handleCancel() {
      this.previewVisible = false;
    },
    handleCancel2() {
      this.previewVisible2 = false;
    },
    handleCancel3() {
      this.previewVisible3 = false;
    },
    handleCancel4() {
      this.previewVisible4 = false;
    },
    handleCancel5() {
      this.previewVisible5 = false;
    },
    handleCancel6() {
      this.previewVisible6 = false;
    },
    handleCancel7() {
      this.previewVisible7 = false;
    },
    handleCancel8() {
      this.previewVisible8 = false;
    },
    handleCancel9() {
      this.previewVisible9 = false;
    },
    handleCancel10() {
      this.previewVisible10 = false;
    },
    handleCancel11() {
      this.previewVisible11 = false;
    },
    handleCancel12() {
      this.previewVisible12 = false;
    },
    handleCancel13() {
      this.previewVisible13 = false;
    },
    handleCancel14() {
      this.previewVisible14 = false;
    },
    handleCancel15() {
      this.previewVisible15 = false;
    },
    handleCancel16() {
      this.previewVisible16 = false;
    },
    handleCancel17() {
      this.previewVisible17 = false;
    },
    handleCancel18() {
      this.previewVisible18 = false;
    },
    handleCancel19() {
      this.previewVisible19 = false;
    },
    handlePreview(file) {
      console.log("file", file);
      this.previewImage = file.url || file.thumbUrl;
      this.previewVisible = true;
    },
    handlePreview2(file) {
      this.previewImage2 = file.url || file.thumbUrl;
      this.previewVisible2 = true;
    },
    handlePreview3(file) {
      this.previewImage3 = file.url || file.thumbUrl;
      this.previewVisible3 = true;
    },
    handlePreview4(file) {
      this.previewImage4 = file.url || file.thumbUrl;
      this.previewVisible4 = true;
    },
    handlePreview5(file) {
      this.previewImage5 = file.url || file.thumbUrl;
      this.previewVisible5 = true;
    },
    handlePreview6(file) {
      this.previewImage6 = file.url || file.thumbUrl;
      this.previewVisible6 = true;
    },
    handlePreview7(file) {
      this.previewImage7 = file.url || file.thumbUrl;
      this.previewVisible7 = true;
    },
    handlePreview8(file) {
      this.previewImage8 = file.url || file.thumbUrl;
      this.previewVisible8 = true;
    },
    handlePreview9(file) {
      this.previewImage9 = file.url || file.thumbUrl;
      this.previewVisible9 = true;
    },
    handlePreview10(file) {
      this.previewImage10 = file.url || file.thumbUrl;
      this.previewVisible10 = true;
    },
    handlePreview11(file) {
      this.previewImage11 = file.url || file.thumbUrl;
      this.previewVisible11 = true;
    },
    handlePreview12(file) {
      this.previewImage12 = file.url || file.thumbUrl;
      this.previewVisible12 = true;
    },
    handlePreview13(file) {
      this.previewImage13 = file.url || file.thumbUrl;
      this.previewVisible13 = true;
    },
    handlePreview14(file) {
      this.previewImage14 = file.url || file.thumbUrl;
      this.previewVisible14 = true;
    },
    handlePreview15(file) {
      this.previewImage15 = file.url || file.thumbUrl;
      this.previewVisible15 = true;
    },
    handlePreview16(file) {
      this.previewImage16 = file.url || file.thumbUrl;
      this.previewVisible16 = true;
    },
    handlePreview17(file) {
      this.previewImage17 = file.url || file.thumbUrl;
      this.previewVisible17 = true;
    },
    handlePreview18(file) {
      this.previewImage18 = file.url || file.thumbUrl;
      this.previewVisible18 = true;
    },
    handlePreview19(file) {
      this.previewImage19 = file.url || file.thumbUrl;
      this.previewVisible19 = true;
    },
    handleCancel() {
      this.previewVisible = false;
    },
    handleCancel2() {
      this.previewVisible2 = false;
    },
    handleCancel3() {
      this.previewVisible3 = false;
    },
    handleCancel4() {
      this.previewVisible4 = false;
    },
    handleCancel5() {
      this.previewVisible5 = false;
    },
    handleCancel6() {
      this.previewVisible6 = false;
    },
    handleCancel7() {
      this.previewVisible7 = false;
    },
    handleCancel8() {
      this.previewVisible8 = false;
    },
    handleCancel9() {
      this.previewVisible9 = false;
    },
    handleCancel10() {
      this.previewVisible10 = false;
    },
    handleCancel11() {
      this.previewVisible11 = false;
    },
    handleCancel12() {
      this.previewVisible12 = false;
    },
    handleCancel13() {
      this.previewVisible13 = false;
    },
    handleCancel14() {
      this.previewVisible14 = false;
    },
    handleCancel15() {
      this.previewVisible15 = false;
    },
    handleCancel16() {
      this.previewVisible16 = false;
    },
    handleCancel17() {
      this.previewVisible17 = false;
    },
    handleCancel18() {
      this.previewVisible18 = false;
    },
    handleCancel19() {
      this.previewVisible19 = false;
    },
    validateIdentityNo(rule, value, callback) {
      const form = this.form;
      if (value && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
        callback("您输入的身份证号码格式有误！");
      } else {
        console.log("身份证号码！", value);
      }
      callback();
    },
    getDownload() {
      console.log("下载");
    },
  },
};
</script>

<style scoped>
.avatar-uploader {
  float: left;
}

.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.c-center {
  text-align: center;
}

.submitButton {
  width: 8vw;
}

.formGroupTitle {
  font-size: 20px;
  font-weight: bold;
  text-align: right;
}

.row-sty {
  margin-bottom: 20px;
  margin-top: 20px;
}
</style>